<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
    padding: 50px;
    background-color: lightblue;
}
.box2{
    padding: 50px;
    background-color: lightgreen;
}
.box3{
    width: 200px;
    height: 100px;
    background-color: lightpink;
}
</style>
</head>
<body>
    
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>
// 事件流：事件的流向，事件的执行顺序
// 子元素和父元素都添加了相同的事件，如 click 事件，然后点击子元素时，父元素的点击事件也会触发，这种事件连续触发的机制称为 '事件冒泡' 或 '事件捕获'
// 涉及事件流的两个关键条件：
// 1.嵌套关系；2.都添加了相同的事件。

// 事件冒泡：事件从里到外依次执行，IE中的事件执行顺序
// 事件捕获：事件从外到里依次执行，网景中的事件执行顺序

// 无论是事件冒泡，还是事件捕获，都有一个特征：传播！

// W3C规定标准的事件流：事件先从外往里触发，到达事件目标之后，再依次从里往外触发

// 实际浏览器基本都是默认为事件冒泡

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');

// DOM 0级事件模型，不能设置事件流
document.onclick = function (){
    console.log( 'document被点击，，，' );
}
document.body.onclick = function (){
    console.log( 'body被点击，，，' );
}
box1.onclick = function (){
    console.log( 'box1被点击，，，' );
}
box2.onclick = function (){
    console.log( 'box2被点击，，，' );
}
box3.onclick = function (){
    console.log( 'box3被点击，，，' );
}


// DOM 2级事件模型，可以设置事件流
// document.addEventListener('click',function (){
//     console.log( 'document被点击。。。' );
// },true);// 默认为false冒泡，true捕获
// document.body.addEventListener('click',function (){
//     console.log( 'body被点击。。。' );
// },true);// 默认为false冒泡，true捕获
// box1.addEventListener('click',function (){
//     console.log( 'box1被点击。。。' );
// },true);// 默认为false冒泡，true捕获
// box2.addEventListener('click',function (){
//     console.log( 'box2被点击。。。' );
// },true);// 默认为false冒泡，true捕获
// box3.addEventListener('click',function (){
//     console.log( 'box3被点击。。。' );
// },true);// 默认为false冒泡，true捕获

</script>
</body>
</html>